<template>
    <div class="tab1">
        <Form ref="formData" :model="formData" :rules="rule" :label-width="160" inline :disabled="editOrView">
            <table style="width:100%;">
                <tr>
                    <td style="width:26%;" colspan="2">
                        <FormItem label="申请人证件号码" prop="azcp0001" >
                            <Input v-model="formData.azcp0001"  @on-blur="loadExistData()" class="itemStyle"/>
                        </FormItem>
                    </td>
                    <td style="width:29%;" colspan="2">
                        <FormItem label="申请人证件类型" prop="azcp0002">
                            <c-dict-select v-model="formData.azcp0002" dictCode="certificatetype" class="itemStyle" showKeys="1"/>
                        </FormItem>
                    </td>
                    <td style="width:29%;" colspan="2">
                        <FormItem label="申请人姓名" prop="azcp0003">
                            <Input v-model="formData.azcp0003" placeholder="" class="itemStyle"/>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td>
                        <FormItem label="申请救助类别" prop="ssca0002">
                            <Select v-model="formData.ssca0002" style="width: 200px" clearable>
                                <Option value="100">城市最低生活保障对象</Option>
                                <Option value="101">城市单人保障对象</Option>
                                <Option value="102">城市因病致贫保障对象</Option>
                                <Option value="200">农村最低生活保障对象</Option>
                                <Option value="201">农村单人保障对象</Option>
                                <Option value="202">农村因病致贫保障对象</Option>
                                <Option value="203">农村建档立卡保障对象</Option>
                            </Select>
                        </FormItem>
                    </td>
                    <td colspan="4">
                        <FormItem label="户籍地行政区划" prop="azdf0006">
                            <area-linkage :areaCode.sync="formData.azdf0006" ></area-linkage>
                        </FormItem>
                    </td>
                </tr>
                <tr>
                    <td>
                        <FormItem label="手机号码">
                            <Input v-model="formData.azdf0011" class="itemStyle" width="200px"/>
                        </FormItem>
                    </td>
                    <td colspan="4">
                        <FormItem label="户籍地详细地址" prop="azdf0500">
                            <Input v-model="formData.azdf0500" class="itemLongStyle"/>
                        </FormItem>
                    </td>
                </tr>
            </table>
        </Form>
        <div style="height:40px;line-height:40px;margin-top:10px;text-align: center ">
            <Button type="primary" @click="nextStep('formData')" :loading="loading" style="margin-left:20px">下一步
            </Button>
        </div>

    </div>
</template>

<script>
    import {postAction} from '@/api/request'
    import {IdentityCodeValid} from '@/plugins/idcardValid.js'
    import {CommonMixin} from '@/views/common/js/CommonMixin'

    export default {
        mixins: [CommonMixin],
        name: 'application1',
        components: {},
        data() {
            return {
                editOrView: false,
                formData: {},
                data: {},
                countyState: false,
                streetState: false,
                communityState: false,
                currentTab: 0,
                familyInfo: {},
                fieldsToValidate: ['azcp0001', 'azcp0002', 'azcp0003', 'azcp0001', 'azdf0006', 'azdf0500'],
                rule: {
                    azcp0001: [
                        {required: true, message: '请填写申请人证件号码', trigger: 'blur'}
                    ],
                    azcp0002: [
                        {required: true, message: '请选择证件类型', trigger: 'blur'}
                    ],
                    azcp0003: [
                        {required: true, message: '请填写申请人姓名', trigger: 'blur'}
                    ],
                    ssca0002: [
                        {required: true, message: '请选择申请救助类别', trigger: 'blur'}
                    ],
                    azdf0006: [
                        {required: true, message: '请选择户籍地行政区划', trigger: 'blur'}
                    ],
                    azdf0500: [
                        {required: true, message: '请填写户籍地详细地址', trigger: 'blur'}
                    ],
                },
                url: {
                    submit: '/api/ac/subsistence/ss02050Service/insertSs02050',
                    load: '/api/ac/subsistence/ss02050Service/loadData',
                },
                loading: false,
            }
        },
        methods: {
            loadExistData() { //输入身份证号码时载入数据
                let that = this
                let azcp0001 = that.formData.azcp0001
                if (azcp0001 == '') {
                    return
                }
                if (azcp0001 == that.azcp0001BeforeChange) { //证件号码未做改动，不触发载入逻辑
                    return
                }
                azcp0001 = azcp0001.toUpperCase()
                that.formData.azcp0001 = azcp0001
                if (!IdentityCodeValid(azcp0001)) {
                    that.$Message.error('申请人身份证号码格式不合法')
                    that.formData.azcp0001 = null
                    return
                } else {
                    let url = that.url.load
                    let dataParam = {}
                    dataParam.azcp0001 = azcp0001
                    postAction(url, dataParam).then((res) => {
                        if (res.data.data.ss02050Data) {
                            that.formData = res.data.data.ss02050Data;
                        } else {
                            that.loading = false
                        }
                    })
                }
            },
            loadStep1Data(azcp0001) { //从后面步骤返回第一步时调用
                let that = this
                that.formData = this.$parent.$parent.familyInfo;
            },
            nextStep(name) {
                let that = this
                let validate = true
                let err_msg = []
                that.loading = true
                for (let item of that.fieldsToValidate) {
                    that.$refs[name].validateField(item, (error) => {
                        if (error) {
                            validate = false
                            err_msg.push(error)
                        }
                    })
                }
                if (validate) {
                    let url = that.url.submit
                    postAction(url, that.formData).then((res) => {
                        if (res.data.data) {
                            if (res.data.data.Message == '录入测评信息成功') {
                                let info = res.data.data
                                that.familyInfo = that.formData
                                that.$emit('nextStep', that.familyInfo, res.data.data.ss02050Id)
                            } else {
                                that.$Message.error(res.data.data.msg)
                                that.loading = false
                            }
                        } else {
                            that.$Message.error('数据交互异常')
                            that.loading = false
                        }
                    }).finally(() => {

                    })
                } else {
                    that.$Message.error(err_msg[0])
                    that.loading = false
                    return
                }
            },
        },
        created() {
            let that = this;
            that.formData = that.$parent.$parent.familyInfo;
            // this.loadData();
        },
    }

</script>

<style scoped>
    .dbhead-img {
        height: 160px;
        width: 120px;
        margin-left: 10px;
    }

    /deep/ .ivu-form-item-error-tip {
        display: none;
    }

    .ivu-form-item {
        margin-bottom: 0px;
    }

    .itemStyle {
        width: 180px
    }

    .itemLongStyle {
        width: 450px
    }
</style>
